﻿@model IEnumerable<FortuneArterial.Site.Laboratory.Models.NavItem>
@{
    ViewBag.Title = "实验室";
}
<div class="easyui-layout" data-options="fit: true">
    <!-- 上方 -->
    <div data-options="region:'north', border: 0" style="height: 50px">
        <header>
            实验室
        </header>
        <div class="easyui-progressbar pbAjax"></div>
        <div class="waiting"></div>
    </div>
    <!-- 左侧 -->
    <div data-options="region:'west',split:true, border: 0" style="width: 240px;">
        <!-- 导航 -->
        <div class="easyui-accordion" data-options="fit: true, selected: 1">
            <div title="关于实验室">
                反正先用EasyUI了，具体的内容会由 Evernote API 生成。
            </div>
            @{ Html.RenderPartial("BasicAPI"); }
            @foreach (var first in Model)
            {
                <div title="@first.Text">
                    <ul class="easyui-tree">
                        @foreach (var second in first.Children)
                        {
                            <li>
                                @if (second.Children.Count > 0)
                                {
                                    <span>@second.Text</span>
                                    <ul>
                                    @foreach (var third in second.Children)
                        {
                            <li>
                                <span>
                                                <span data-controller="/Laboratory/@second.Name" data-action="@third.Name">@third.Text</span>
                                                <a href="#"><i class="fa fa-external-link">open</i></a>
                                            </span>
                                        </li>
                                    }
                                    </ul>
                                }
                                else
                                { 
                                    <span>
                                        <span data-controller="/Laboratory/@first.Name" data-action="@second.Name">@second.Text</span>
                                        <a href="#"><i class="fa fa-external-link">open</i></a>
                                </span>
                                }
                            </li>
                        }
                    </ul>
                </div>                
            }
        </div>
    </div>
    <!-- 正文 -->
    <div data-options="region:'center', border: 0">
        <!-- 标签页 -->
        <div id="tab" class="easyui-tabs" data-options="fit: true">
            <div title="Welcome" style="padding:10px;">
                Welcome
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div data-options="region:'south', border: 0" style="height: 20px">
        <footer>
            &copy;FortuneArterial Works Inc.
        </footer>
    </div>
</div>
@section CascadingStyleSheets {
    <style type="text/css">
        * { box-sizing: border-box; }
        html, body, .full, iframe {width: 100%;height: 100%;border: none; }
        iframe {
            border: none;
        }
        .no-scroll > .panel-body {
            overflow: hidden;
        }

        .pull-right { float: right; }
        .pull-left { float: left; }

        footer {
            text-align: right;
            line-height: 20px;
        }

        .pbAjax {
            position: absolute;
            width: 100%;
            top: -20px;
            border: none;
            display: none;
        }

        .waiting {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 16px;
            height: 16px;
            display: none;

            background-image: url('/Assets/jQuery/EasyUI/themes/metro-blue/images/loading.gif');
        }
    </style>
}
@section Javascript {
    <script type="text/javascript" src="/Laboratory/Assets/js/Stopwatch.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //取消超链接的跳转事件
            $('.easyui-accordion').find('a')
                .click(function(e) {
                    e.preventDefault();

                    if ($(this).find('.fa-external-link').size() > 0) {
                        e.stopPropagation();

                        var $this = $(this).prev();
                        var href = $this.data('controller') + '/' + $this.data('action');
                        window.open(href);
                    }
                });
        });

        //Ajax
        var Waiting = (function() {
            var num = 0;
            var count = 0;
            var timer;

            return {
                wait: function(v) {
                    count = count + v;
                    
                    if (timer) return;
                    
                    $('.pbAjax').show();
                    $('.waiting').show();
                    timer = setInterval(function() {
                        num++;
                        $('.pbAjax').progressbar({
                            value: Math.round(num * 100 / count)
                        });

                        if (num >= count) {
                            clearInterval(timer);
                            timer = null;

                            $('.pbAjax').progressbar({
                                value: 100
                            });
                            $('.waiting').fadeOut();
                            $('.pbAjax').fadeOut(function() {
                                $('.pbAjax').progressbar({
                                    value: 0
                                });
                            });
                            count = 0;
                            num = 0;
                        }
                    }, 50);
                }
            };
        })();
        $(document).ajaxStart(function() {
            Waiting.wait(100);
        });
        $(document).ajaxStop(function() {
            Waiting.wait(-100);
        });

        
        //导航
        $('.easyui-tree').tree({
            onClick: function(node) {
                console.info(node);

                if ($(node.target).find('a').size() > 0
                    && $(node.target).find('a:last').attr('href') !== '#') {
                    var $this = $(node.target).find('a:last');

                    var href = $this.attr('href');
                    //添加标签页
                    $('#tab').tabs('add', {
                        title: $this.text() + '[' + $this.parents('ul:first').prev().text() + ']',
                        selected: true,
                        closable: true,
                        content: '<iframe src="' + href + '"></iframe>'
                    });
                    $('#tab').tabs('getSelected')
                        .css({
                            overflow: 'hidden'
                        });
                } else {
                    var $this = $(node.target).find('span:last');
                    if (!$this.data('controller') || !$this.data('action')) return;

                    var href = $this.data('controller') + '/' + $this.data('action');
                    //添加标签页
                    $('#tab').tabs('add', {
                        title: $this.text(),
                        selected: true,
                        closable: true,
                        style: {
                            paddingLeft: 10,
                            paddingTop: 10,
                            paddingBottom: 10
                        },
                        tools: [
                            {
                                iconCls: 'icon-reload',
                                handler: function() {
                                    $('#tab').tabs('getSelected').panel('refresh');
                                }
                            }
                        ],
                        content: [
                            '<div class="easyui-tabs" data-options="fit: true, tabPosition: \'right\', plain: true, headerWidth: 50">',
                            '   <div title="Page" style="overflow:hidden;"><iframe src="', href, '"></iframe></div>',
                            '   <div title="HTML" data-options="href: \'', href, '?html\'" style="padding: 10px;"></div>',
                            '   <div title="Code" data-options="href: \'', href, '?cs\'" style="padding: 10px;"></div>',
                            '</div>'
                        ].join('')
                    });
                }
            }
        });
    </script>
}